/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/jsx-no-bind */
import React, { useEffect, useState } from 'react';
import { Col, message, Modal, Checkbox, Row, Table } from 'antd';
import { getGpYzZoneList } from '@/services/area';
import { dispatchArea } from '@/services/account';

const Index = ({ getList, record, children, ...rest }) => {
  const { phone, area_ids } = record;

  const [tableData, setTableData] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [checked, setChecked] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [visible, setVisible] = useState(false);

  const handleOk = () => {
    const ids = checked ? '*' : selectedRows.join(',');
    if (!ids) {
      message.error('请选择所管理的片区');
      return;
    }
    setSubmitting(true);
    dispatchArea({ phone, area_id: ids })
      .then(res => {
        const { code, msg } = res;
        if (code == 0) {
          message.success('分配成功');
          setVisible(false);
          getList();
        } else {
          message.error(msg);
        }
        setSubmitting(false);
      })
      .catch(() => {
        setSubmitting(false);
      });
  };

  const handleClick = () => {
    setVisible(true);
  };

  const handleSelectRow = rows => {
    setSelectedRows(rows);
    setChecked(false);
  };

  const onAllChange = e => {
    const check = e.target.checked;
    check && setSelectedRows([]);
    setChecked(check);
  };

  const columns = [
    {
      title: '片区',
      dataIndex: 'site_name',
    },
    {
      title: '负责人',
      dataIndex: 'site_charge',
    },
    {
      title: '手机号',
      dataIndex: 'site_phone',
    },
  ];

  useEffect(
    () => {
      if (visible) {
        const area_ids_arr = area_ids.split(',');
        setChecked(area_ids == '*');
        setSelectedRows(area_ids === '*' ? [] : area_ids_arr);
        getGpYzZoneList().then(list => {
          setTableData(list);
        });
      }
    },
    [visible, area_ids],
  );

  return (
    <>
      <span onClick={handleClick}>{children}</span>
      <Modal
        width={650}
        visible={visible}
        title="片区管理"
        onOk={handleOk}
        onCancel={() => {
          setVisible(false);
        }}
        confirmLoading={submitting}
        destroyOnClose
        {...rest}
      >
        <Row gutter={[10, 10]}>
          <Col>公司层级管理者请选择"全公司"</Col>
          <Col>
            <Checkbox checked={checked} onChange={onAllChange}>
              全公司
            </Checkbox>
          </Col>
          <Col>片区层级管理者请选择以下片区</Col>
        </Row>
        <Table
          rowKey="site_id"
          columns={columns}
          dataSource={tableData}
          scroll={{ x: 600 }}
          rowSelection={{
            selectedRowKeys: selectedRows,
            onChange: handleSelectRow,
          }}
          pagination={false}
        />
      </Modal>
    </>
  );
};

export default Index;
